<!--
 * @Author: 丨小小风离丨
 * @Date: 2023-04-28 16:33:51
 * @LastEditTime: 2023-05-25 15:16:26
 * @LastEditors: 丨小小风离丨
 * @Description: 
-->
<template>
  <div style="width: 200px">
    <el-form label-position="top" label-width="80px" :model="value">
      <el-form-item label="名称">
        <el-input 
          :model-value="value.name" 
          @update:model-value="$event => handleUpdate('name', $event)">
        </el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select 
          :model-value="value.region" 
          @update:model-value="$event => handleUpdate('region', $event)" 
          placeholder="活动区域">
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="北京" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="即时配送" prop="delivery">
        <el-switch 
          :model-value="value.delivery" 
          @update:model-value="$event => handleUpdate('delivery', $event)">
        </el-switch>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input 
          :model-value="value.type" 
          @update:model-value="$event => handleUpdate('type', $event)">
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const _that = {}
export default {
  props: {
    value: {
      type: Object,
      default: ''
    }
  },
  methods: {
    /**
     * @description: 双向绑定的update更新函数
     * @param {*} name  自定义更新的字段名
     * @param {*} val   更新的内容
     * @return {*}
     */
    handleUpdate(name, val) {
      this.$emit('update:value', {
        ...this.value,
        [name]: val
      })
    }
  }
}
</script>

<style></style>
